<template>
  <div class="content-box" ref="content" v-loading.fullscreen.lock="fullscreenLoading">
    <div class="c-left">
      <PageTitle :src="imgUrl[0]" name="太原市招商引资项目概览"></PageTitle>
      <div class="page-block1">
        <div v-for="(item, index) in block1" :key="item.name" :style="{
          background: item.bgColor,
          margin: index === 1 ? '0 20px' : '0px',
        }" class="b-item">
          <div class="left">
            <img :src="item.img" style="width: 55px; height: 55px" alt="img" />
          </div>
          <div class="right">
            <div class="num1">
              <span style="font-weight: bold;font-size: 18px;">{{ item.name }}</span>
              <span class="num" :style="{ color: item.color }">{{
                item.count
              }}</span>
              <span style="font-size: 16px;color: #999;">个</span>
            </div>
            <div class="num1">
              <span>{{ curMonth }}</span>月新增<span :style="{ color: item.color, padding: '0 5px', fontWeight: 'bold' }">{{
                item.newCount
              }}</span>个
            </div>
          </div>
        </div>
      </div>
      <PageTitle :src="imgUrl[0]" name="太原市各县（市、区）、开发区项目概览"></PageTitle>
      <div ref="chartDom" class="chart-dom" :style="{ height: domHeight }">
        <div class="chart-dom-title">{{ chartTitle }}</div>
        <div class="chart-body">
          <div class="chart-self" ref="chartMap"></div>
          <div class="chart-node">
            <div v-for="item in chartNodeList" :key="item.name" class="chart-node-item">
              <div class="bar" :style="{ background: item.color }"></div>
              <div>
                <div style="display: flex; align-items: center">
                  <span class="circle" :style="{ background: item.color }"></span>
                  <span style="font-weight: bold">{{ item.type }}</span>
                </div>
                <div>
                  <span class="num" :style="{ color: item.color }">{{
                    item.count
                  }}</span>
                  <span>(个)</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-right">
      <PageTitle :src="bImg4" name="各县 (市、区) 、开发区招商引资考核情况"></PageTitle>
      <div style="margin: 20px 0 30px 0;">
        <statisticalTimeTemp @changeTimeVal="changeTimeVal"></statisticalTimeTemp>
      </div>
      <div>
        <el-table :data="tableData" stripe size="small"
          style="width: 100%;border-radius: 8px;overflow: hidden;border: 1px solid #e5e5e5;box-sizing: border-box;overflow-x: hidden;"
          :header-cell-style="headerRowStyle" :height="tableHeight">
          <el-table-column prop="index" label="排名" align="center" width="50">
            <template slot-scope="scope">
              <span style="color: #3254b7;font-weight: bold;">{{ scope.row.index }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="county" align="center" label="县（市、区）、开发区" width="278">
          </el-table-column>
          <el-table-column prop="df" label="分数" align="center" width="70">
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script>
import ty from "@map/ty-index.json";
import dotActive from "@img/public/icon-dot-active.png";
import dotNormal from "@img/public/icon-dot-normal.png";
import pImg1 from "@img/project/icon-xmgl4.png";
import bImg1 from "@img/project/icon-xmgl-02.png";
import bImg2 from "@img/project/icon-xmgl-03.png";
import bImg3 from "@img/project/icon-xmgl-04.png";
import bImg4 from "@img/project/icon-khzb.png";
import PageTitle from "./common/pageTitle.vue";
import statisticalTimeTemp from "./common/statisticalTimeTemp.vue";
import { projectOverview } from "@/api/projectManaApi";

export default {
  components: { PageTitle, statisticalTimeTemp },
  data() {
    return {
      showDialog: false,
      district: "",
      chartMap: null,
      imgUrl: [pImg1],
      block1: [
        {
          name: "在谈项目",
          img: bImg1,
          count: 0,
          newCount: 0,
          color: "#FF9900",
          bgColor: "#FFF8EE",
        },
        {
          name: "已签约项目",
          img: bImg2,
          count: 0,
          newCount: 0,
          color: "#07B89B",
          bgColor: "#EBFCF9",
        },
        {
          name: "已开工项目",
          img: bImg3,
          count: 0,
          newCount: 0,
          color: "#1F4CED",
          bgColor: "#F5F7FF",
        },
      ],
      curMonth: 0,
      domHeight: `${document.body.clientHeight - 452}px`,
      chartDom: null,
      tableData: [],
      tableHeight: document.body.clientHeight - 310,
      chartNodeList: [],
      chartTitle: "太忻一体化经济区（太原区）",
      fullscreenLoading: false,
      options: [],
      bImg4: bImg4
    };
  },
  mounted() {
    // this.initSize();
    this.initMap();
    this.initProjectOverview("", "");
    window.addEventListener("resize", () => {
      this.initSize();
      this.chartMap.resize();
    });
  },
  created() { },
  methods: {
    // 表头
    headerRowStyle() {
      return "color: #1C1C28;background:#E5E5E5";
    },
    changeTimeVal(val) {
      this.initProjectOverview("", val || "");
    },
    // 项目总览数据
    async initProjectOverview(county, time) {
      this.fullscreenLoading = true;
      let res = await projectOverview(county, time);
      if (res && typeof res === "object") {
        for (let key in res) {
          // table
          if (key === "各县区招商引资考核情况") {
            this.tableData = res[key].map((item, index) => {
              item.index = index + 1;
              return item;
            });
          }
          // 头部
          if (key === "太原市招商引资项目概览") {
            for (let i = 0; i < res[key].length; i++) {
              // this.block1[i].name = res[key][i].type;
              this.block1[i].count = res[key][i].count;
              this.block1[i].newCount = res[key][i].newCount;
            }
          }
          // map
          if (key === "太原市各县项目概览") {
            const colors = ["#1F4CED", "#29C2A9", "#FF9900"];
            const arr = res[key].map((item, index) => {
              item.color = colors[index];
              return item;
            });
            this.chartNodeList = arr;
          }
        }
        this.fullscreenLoading = false;
      }
    },
    // 尺寸设置
    initSize() {
      const date = new Date();
      this.curMonth = date.getMonth() + 1;
      this.domHeight = `${document.body.clientHeight - 452}px`;
      this.tableHeight = document.body.clientHeight - 310;

    },
    changeActiveDistrict(district) {
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "开发区",
      });
      this.chartMap.dispatchAction({
        type: "downplay",
        seriesName: "行政区",
      });
      if (district == "太忻一体化") {
        this.chartMap.dispatchAction({
          type: "highlight",
          seriesName: "开发区",
          name: [
            // "中北高新区",
            // "阳曲示范区",
            // "西山示范区",
            // "中北高新区-太忻",
            // "阳曲示范区-太忻",
            // "西山示范区-太忻",
            "阳曲县-太忻",
            "古交市-太忻",
            "尖草坪区-太忻",
            "万柏林区-太忻",
            "杏花岭区-太忻",
            "迎泽区-太忻",
            "太忻一体化经济区（太原区）",
          ],
        });
        this.chartMap.dispatchAction({
          type: "highlight",
          seriesName: "行政区",
          name: [
            "阳曲县",
            "古交市",
            "尖草坪区",
            "万柏林区",
            "杏花岭区",
            "迎泽区",
          ],
        });
      }
      this.district = district;
    },
    initMap() {
      this.chartMap = this.$echarts.init(this.$refs.chartMap);
      this.$echarts.registerMap("ty", ty);
      const initOption = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            let result = `${params.marker} ${params.name} ： ${params.componentSubType == "scatter" && params.data
              ? params.data.value[2] || params.data.value
              : 0
              }个项目`;
            return result;
          },
        },
        geo: {
          type: "map",
          map: "ty",
          zoom: 1.2,
          geoIndex: 0,
          selectedMode: "single",
          label: {
            show: true,
            color: "#C68018",
            padding: [8, 14, 6, 14],
            borderRadius: 4,
            textBorderWidth: 0,
            backgroundColor: "#FFE5BF",
            fontSize: 14,
            formatter: function (params) {
              return params.name;
            },
            rich: {
              normalIcon: {
                backgroundColor: {
                  image: dotNormal,
                },
              },
              activeIcon: {
                backgroundColor: {
                  image: dotActive,
                },
              },
            },
          },
          itemStyle: {
            areaColor: "#ffbe5f",
            borderColor: "#FFFFFF",
            borderWidth: 2,
          },
          select: {
            itemStyle: {
              areaColor: "#F46D43",
              color: "#F46D43",
              borderColor: "#FFFFFF",
              borderWidth: 2,
            },
            label: {
              show: true,
              color: "#F46D43",
              backgroundColor: "#fff",
            },
          },
          emphasis: {
            label: {
              show: true,
              color: "#F46D43",
              backgroundColor: "#fff",
              formatter: function (params) {
                //标签内容
                return params.name;
              },
            },
            itemStyle: {
              areaColor: "#F46D43",
              color: "#F46D43",
              borderColor: "#FFFFFF",
              borderWidth: 2,
            },
          },
        },
        series: [
          {
            name: "行政区",
            type: "map",
            map: "ty",
            geoIndex: 0,
            animation: false,
            label: {
              position: "right",
              offset: [30, 40],
              z: 10,
            },
            symbol: "none",
            data: [],
          },
          {
            type: "lines",
            name: "开发区",
            z: 3,
            coordinateSystem: "geo",
            symbol: "circle",
            symbolSize: [8, 0],
            color: "#C68018",
            opacity: 1,
            label: {
              show: true,
              position: "end",
              formatter: [`{title|{b}}`].join("\n"),
              backgroundColor: "#FFE5BF",
              borderRadius: 4,
              align: "center",
              width: 90,
              rich: {
                title: {
                  align: "center",
                  lineHeight: 28,
                  fontSize: 12,
                  color: "#C68018",
                  width: 90,
                  height: 30,
                  borderRadius: [4, 4, 0, 0],
                },
                title_active: {
                  align: "center",
                  lineHeight: 28,
                  fontSize: 12,
                  fontWeight: "bold",
                  color: "#fff",
                  backgroundColor: "rgba(209, 68, 18, 1)",
                  width: 90,
                  height: 30,
                  borderRadius: [4, 4, 0, 0],
                },
              },
            },
            lineStyle: {
              type: "dashed",
              opacity: 1,
              width: 1,
              color: "#F46D43",
              curveness: 0,
            },
            emphasis: {
              label: {
                formatter: [`{title_active|{b}}`].join("\n"),
              },
              lineStyle: {
                type: "dashed",
                opacity: 1,
                color: "#F46D43",
                curveness: 0,
              },
            },
            data: [
              {
                coords: [
                  [112.570721979812, 37.9718734652464],
                  [113, 37.9718734652464],
                ],
                name: "中北高新区",
                value: 5,
              },
              {
                coords: [
                  [112.365286246971, 37.6133580518845],
                  [113, 37.6133580518845],
                ],
                name: "清徐开发区",
                value: 0,
              },
              {
                coords: [
                  [112.679409, 38.064621],
                  [113, 38.064621],
                ],
                name: "阳曲示范区",
                value: 0,
              },
              {
                coords: [
                  [112.342, 37.882],
                  [113, 37.882],
                ],
                name: "西山示范区",
                value: 0,
              },
              {
                coords: [
                  [112.56, 38.128],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "阳曲县-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.174353, 37.95],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "古交市-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.47, 38.0],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "尖草坪区-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.361, 37.91],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "万柏林区-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.62, 37.9],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "杏花岭区-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.62, 37.84],
                  [112.34, 38.05],
                ],
                label: {
                  show: false,
                },
                lineStyle: {
                  dashOffset: 10,
                  type: "dashed",
                },
                emphasis: {
                  lineStyle: {
                    dashOffset: 10,
                    type: "dashed",
                  },
                },
                symbolSize: [1, 0],
                name: "迎泽区-太忻",
                value: 0,
              },
              {
                coords: [
                  [112.34, 38.05],
                  [112.34, 38.33],
                ],
                symbolSize: [1, 0],
                label: {
                  width: 170,
                  rich: {
                    title: {
                      width: 170,
                    },
                    title_active: {
                      width: 170,
                    },
                  },
                },
                name: "太忻一体化经济区（太原区）",
                value: 0,
              },
            ],
          },
        ],
      };
      this.chartMap.setOption(initOption);
      // 地图点击事件
      this.chartMap.on("click", (item) => {
        let notClick = [
          "中北高新区-太忻",
          "阳曲示范区-太忻",
          "西山示范区-太忻",
          "阳曲县-太忻",
          "古交市-太忻",
          "尖草坪区-太忻",
          "万柏林区-太忻",
          "杏花岭区-太忻",
          "迎泽区-太忻",
        ];
        if (notClick.includes(item.name)) {
          return;
        }
        this.initProjectOverview(item.name);
        this.chartTitle = item.name;
        if (item.name == "太忻一体化经济区（太原区）") {
          this.changeActiveDistrict("太忻一体化");
          return;
        }
        // return;
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "开发区",
        });
        this.chartMap.dispatchAction({
          type: "downplay",
          seriesName: "行政区",
        });
        if (this.district == item.name) {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: item.dataIndex,
          });
          return;
        }
        this.district = item.name;
        if (item.componentSubType == "lines") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
          this.chartMap.dispatchAction({
            type: "select",
            seriesName: "开发区",
            dataIndex: item.dataIndex,
          });
        }
        if (item.componentSubType == "map") {
          this.chartMap.dispatchAction({
            type: "highlight",
            seriesName: "行政区",
            dataIndex: item.dataIndex,
          });
        }
        this.$message({
          message: "成功切换至" + item.name,
          type: "success",
        });
      });
    },
  },
};
</script>
<style lang="less" scoped>
.content-box {
  box-sizing: border-box;
  flex: 1;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: space-between;

  .c-left {
    flex: 1;
  }

  .c-right {
    width: 400px;
    margin-left: 20px;
    text-align: left;
    box-sizing: border-box;
  }
}

//区域一
.page-block1 {
  display: flex;
  height: 130px;
  align-items: center;
  margin: 20px 0 30px 0;
  overflow: hidden;

  .b-item {
    flex: 1;
    display: flex;
    align-items: center;
    border-radius: 10px;
    height: 100%;
    font-size: 18px;
    padding: 0 0 0 36px;
    box-sizing: border-box;

    .left {
      width: 60px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
    }

    .right {
      flex: 1;

      .num1 {
        display: flex;
        align-items: center;
        font-size: 18px;
      }

      .num {
        font-size: 30px;
        padding: 0 5px;
        font-weight: bold;
      }
    }
  }
}

//图表
.chart-dom {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #ddd;
  position: relative;
  margin-top: 20px;
  box-sizing: border-box;
  overflow: hidden;

  .chart-dom-title {
    position: absolute;
    left: 20px;
    top: 20px;
    padding: 0 10px;
    height: 36px;
    background: #ffe5bf;
    border-radius: 4px;
    max-width: 360px;
    color: #c68018;
    font-size: 1.2em;
    text-align: center;
    line-height: 36px;
    box-sizing: border-box;
  }

  .chart-body {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .chart-self {
    flex: 1;
    width: 100%;
    height: 58vh;
  }

  .chart-node {
    width: 150px;
    text-align: left;

    .chart-node-item {
      display: flex;
      height: 90px;
      align-items: center;

      .circle {
        width: 6px;
        height: 6px;
        display: inline-block;
        border-radius: 3px;
        margin-right: 5px;
      }

      .bar {
        width: 18px;
        height: 90px;
        margin-right: 15px;
      }

      .num {
        font-size: 1.3em;
        padding-right: 10px;
        font-weight: bold;
      }
    }
  }
}

@media screen and(max-width: 1460px) {
  .page-block1 {
    .b-item {
      padding: 0 0 0 10px;
    }
  }
}

@media screen and(max-width: 1366px) {
  .page-block1 {
    .b-item {
      padding: 0 0 0 5px;
    }
  }
}
</style>
